<template>
	<!-- 应收返水统计 -->
	<div
		v-loading="returnWaterLoading"
		element-loading-spinner="el-icon-loading"
	>
		<p class="name">
			{{ getFormateDate(detailData.reportDate)
			}}{{ $t('期应收返水统计') }}
		</p>
		<div class="block-content">
			<el-table
				border
				size="mini"
				:data="returnWaterSummary"
				style="width: 100%"
				:header-cell-style="getRowClass"
			>
				<el-table-column
					align="center"
					:label="`${$t('common.member_number')}`"
				>
					<template slot-scope="scope">
						{{ scope.row.memberName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="$t('funds.fund_audit.return_water_status')"
					prop="payoutStatus"
				>
					<template slot-scope="scope">
						{{
							bounsPayoutStatusMap[scope.row.payoutStatus] || '-'
						}}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="`${$t('funds.fund_audit.person_return_water')}`"
					prop="personRebateAmount"
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.personRebateAmount
							)
						}}
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { bounsPayoutStatusMap } from '@/dict/funds'
export default {
	mixins: [list],
	props: {
		detailData: {
			type: Object,
			required: true
		}
	},
	data() {
		return {
			returnWaterLoading: false,
			returnWaterSummary: [], // 应收返水统计
			bounsPayoutStatusMap
		}
	},
	watch: {
		// detailData: {
		// 	handler(val) {
		// 		if (val.memberId) {
		// 			this.getMemberRebateAuditList()
		// 		}
		// 	},
		// 	immediate: true
		// }
	},
	created() {
		if (this.detailData?.memberId) {
			this.getMemberRebateAuditList()
		}
	},
	methods: {
		// 应收返水统计
		async getMemberRebateAuditList() {
			this.returnWaterLoading = true
			const params = {
				memberId: this.detailData.memberId,
				reportStartDate: this.detailData.reportDate,
				reportEndDate: this.detailData.reportDate
			}
			this.returnWaterSummary = []
			await this.$api
				.getMemberRebateAuditDetailPage(params)
				.then((res) => {
					this.returnWaterLoading = false
					const record = res.data?.record[0] || {}
					this.returnWaterSummary = [
						{
							currency: record?.currency || '',
							memberName: record?.memberName || '',
							payoutStatus: record?.payoutStatus,
							personRebateAmount: record?.personRebateAmount || 0,
							rebateAmount: record?.rebateAmount || 0
						}
					]
				})
				.catch(() => {
					this.returnWaterLoading = false
				})
		}
	}
}
</script>

<style lang="scss" scoped>
.name {
	font-weight: 600;
	font-size: 20px;
}
.block-content {
	position: relative;
	width: 100%;
	margin-top: 10px;
	word-break: break-all;
}
</style>
